<template>
	<view class="container">
		<view class="form-item">
			<text class="label">医院选择</text>
			<view style="display: flex;justify-content: space-between;
		border-bottom: 1rpx solid #80e9b6;">
				<picker @change="onHospitalChange" :value="hospitalIndex" :range="hospitals">
					<view class="picker">
						{{hospitalIndex >= 0 ? hospitals[hospitalIndex] : '下拉选择医院'}}
					</view>
				</picker>
				<image src="/static/botom.png" alt="" style="width: 50rpx;height: 50rpx;" />
			</view>
		</view>

		<view class="form-item">
			<text class="label">科室选择</text>
			<view style="display: flex;justify-content: space-between;
		border-bottom: 1rpx solid #80e9b6;">
				<picker @change="onDepartmentChange" :value="departmentIndex" :range="departments">
					<view class="picker">
						{{departmentIndex >= 0 ? departments[departmentIndex] : '下拉选择科室'}}
					</view>
				</picker>
				<image src="/static/botom.png" alt="" style="width: 50rpx;height: 50rpx;" />
			</view>
		</view>

		<view class="form-item">
			<text class="label">职称级别</text>
			<view style="display: flex;justify-content: space-between;
		border-bottom: 1rpx solid #80e9b6;">
				<picker @change="onTitleChange" :value="titleIndex" :range="titles">
					<view class="picker">
						{{titleIndex >= 0 ? titles[titleIndex] : '请选择职称'}}
					</view>
				</picker>
				<image src="/static/botom.png" alt="" style="width: 50rpx;height: 50rpx;" />
			</view>
		</view>

		<view class="form-item">
			<text class="label">擅长领域</text>
			<input class="input" placeholder="请输入您擅长的领域" v-model="expertise" />
		</view>

		<view class="form-item">
			<text class="label" style="color: #babcbc;">姓名</text>
			<text class="readonly-text">显示姓名（姓名和身份证号无法修改）</text>
		</view>

		<view class="form-item">
			<text class="label" style="color: #babcbc;">居民身份证</text>
			<text class="readonly-text">45000000000000</text>
		</view>

		<button class="submit-btn" @click="submitForm">申请认证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalIndex: -1,
				hospitals: ['北京协和医院', '上海瑞金医院', '广州中山医院', '华西医院'],

				departmentIndex: -1,
				departments: ['内科', '外科', '儿科', '妇产科', '眼科', '耳鼻喉科'],

				titleIndex: -1,
				titles: ['主任医师', '副主任医师', '主治医师', '住院医师'],

				expertise: ''
			}
		},
		methods: {
			onHospitalChange(e) {
				this.hospitalIndex = e.detail.value
			},
			onDepartmentChange(e) {
				this.departmentIndex = e.detail.value
			},
			onTitleChange(e) {
				this.titleIndex = e.detail.value
			},
			submitForm() {
				// 提交表单逻辑
				uni.showToast({
					title: '认证申请已提交',
					icon: 'success'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		background-color: #fff;
	}

	.form-item {
		margin-bottom: 10px;
		background-color: #fff;
		/* padding: 15px; */
		border-radius: 8px;
	}

	.label {
		display: block;
		margin-bottom: 10px;
		font-size: 34rpx;
		color: #333;
		font-weight: bold;
	}

	.picker {
		padding: 10px;
		/* border: 1px solid #eee; */
		/* border-radius: 4px; */
		color: #666;
	}

	.input {
		padding: 30px;
		border: 2px solid #00d36d;
		border-radius: 20rpx;
	}

	.readonly-text {
		color: #999;
		font-size: 14px;
		padding: 10px 0;
		display: block;
	}

	.submit-btn {
		margin-top: 30px;
		background-color: #00d36d;
		color: white;
		border-radius: 8px;
		font-weight: bold;
		font-size: 42rpx;
		box-shadow: 0 6rpx 12rpx rgba(38, 191, 0, 0.8);

	}
</style>